import React, { useState } from 'react';
import { Card, Button, Tag, Tooltip, Row, Col, message } from 'antd';
import { 
  CalendarOutlined, 
  FolderOutlined, 
  SettingOutlined, 
  EyeOutlined,
  EditOutlined,
  DeleteOutlined,
  ClockCircleOutlined,
  DownloadOutlined,
  CopyOutlined,
  ExperimentOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { Project } from '../../types';
import ExportModalV2 from './ExportModalV2';

interface ProjectCardProps {
  project: Project;
  onView: (project: Project) => void;
  onEdit: (project: Project) => void;
  onDelete: (project: Project) => void;
}

const ProjectCard: React.FC<ProjectCardProps> = ({ 
  project, 
  onView, 
  onEdit, 
  onDelete 
}) => {
  const navigate = useNavigate();
  const [exportModalVisible, setExportModalVisible] = useState(false);


  const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'short',
      day: 'numeric'
    });
  };

  // 复制项目英文名到剪贴板
  const handleCopyNameEn = async (e: React.MouseEvent) => {
    e.stopPropagation(); // 阻止事件冒泡，避免触发其他点击事件
    try {
      await navigator.clipboard.writeText(project.name_en);
      message.success(`已复制项目英文名: ${project.name_en}`);
    } catch (error) {
      console.error('复制失败:', error);
      message.error('复制失败，请手动复制');
    }
  };


  return (
    <Card
      className="project-card-enhanced"
      hoverable
      style={{
        background: 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
        border: '1px solid #e2e8f0',
        borderRadius: '16px',
        overflow: 'hidden',
        position: 'relative'
      }}
      styles={{ body: { padding: 0 } }}
    >
      {/* 卡片头部 */}
      <div className="project-card-header">
        <div className="project-title-section">
          <div className="project-title">
            <h3 className="project-name">{project.name}</h3>
            <Tooltip title="点击复制项目英文名">
              <Tag 
                color="processing" 
                className="project-name-en"
                style={{ 
                  fontSize: '11px',
                  fontWeight: 500,
                  borderRadius: '12px',
                  padding: '2px 8px',
                  marginLeft: '8px',
                  cursor: 'pointer',
                  transition: 'all 0.2s ease',
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: '4px'
                }}
                onClick={handleCopyNameEn}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = 'scale(1.05)';
                  e.currentTarget.style.boxShadow = '0 2px 8px rgba(24, 144, 255, 0.3)';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = 'scale(1)';
                  e.currentTarget.style.boxShadow = 'none';
                }}
              >
                {project.name_en}
                <CopyOutlined style={{ fontSize: '10px' }} />
              </Tag>
            </Tooltip>
          </div>
          {project.description && (
            <p className="project-description">{project.description}</p>
          )}
        </div>
        
      </div>

      {/* 卡片内容 */}
      <div className="project-card-content">
        {/* 统计信息 */}
        <Row gutter={[16, 16]} className="project-stats">
          <Col span={8}>
            <div className="stat-item">
              <div className="stat-icon">
                <CalendarOutlined />
              </div>
              <div className="stat-content">
                <div className="stat-value">{project.time_horizon}</div>
                <div className="stat-label">年</div>
              </div>
            </div>
          </Col>
          <Col span={8}>
            <div className="stat-item">
              <div className="stat-icon">
                <FolderOutlined />
              </div>
              <div className="stat-content">
                <div className="stat-value">{project.category_count || 0}</div>
                <div className="stat-label">分类</div>
              </div>
            </div>
          </Col>
          <Col span={8}>
            <div className="stat-item">
              <div className="stat-icon">
                <SettingOutlined />
              </div>
              <div className="stat-content">
                <div className="stat-value">{project.parameter_count || 0}</div>
                <div className="stat-label">参数</div>
              </div>
            </div>
          </Col>
        </Row>


        {/* 时间信息 */}
        <div className="project-time-info">
          <div className="time-range">
            <ClockCircleOutlined className="time-icon" />
            <span>{project.start_year} - {project.end_year} 年</span>
            <span className="time-step">步长: {project.year_step} 年</span>
          </div>
        </div>
      </div>

      {/* 卡片底部操作区 */}
      <div className="project-card-footer">
        <div className="project-meta-info">
          <span className="created-date">
            创建于 {formatDate(project.created_at)}
          </span>
          {project.updated_at !== project.created_at && (
            <span className="updated-date">
              • 更新于 {formatDate(project.updated_at)}
            </span>
          )}
        </div>
        
        <div className="project-actions">
          <Tooltip title="查看详情">
            <Button 
              type="default" 
              icon={<EyeOutlined />} 
              onClick={() => onView(project)}
              className="action-btn view-btn"
              style={{ 
                color: '#1890ff',
                borderColor: '#1890ff',
                background: 'rgba(24, 144, 255, 0.1)'
              }}
            >
              查看
            </Button>
          </Tooltip>
          <Tooltip title="编辑项目">
            <Button 
              type="default" 
              icon={<EditOutlined />} 
              onClick={() => onEdit(project)}
              className="action-btn edit-btn"
              style={{ 
                color: '#52c41a',
                borderColor: '#52c41a',
                background: 'rgba(82, 196, 26, 0.1)'
              }}
            >
              编辑
            </Button>
          </Tooltip>
          <Tooltip title="删除项目">
            <Button 
              type="default" 
              danger 
              icon={<DeleteOutlined />} 
              onClick={() => onDelete(project)}
              className="action-btn delete-btn"
              style={{ 
                color: '#ff4d4f',
                borderColor: '#ff4d4f',
                background: 'rgba(255, 77, 79, 0.1)'
              }}
            >
              删除
            </Button>
          </Tooltip>
          <Tooltip title="查看实验结果">
            <Button 
              type="default" 
              icon={<ExperimentOutlined />} 
              onClick={(e) => {
                e.stopPropagation();
                navigate(`/project/${project.name_en}/experiments`);
              }}
              className="action-btn experiment-btn"
              style={{ 
                color: '#722ed1',
                borderColor: '#722ed1',
                background: 'rgba(114, 46, 209, 0.1)',
                marginRight: 8
              }}
            >
              实验结果
            </Button>
          </Tooltip>
          <Button 
            type="primary" 
            icon={<DownloadOutlined />} 
            onClick={() => setExportModalVisible(true)}
          >
            导出
          </Button>
        </div>
      </div>

      {/* 导出模态框 */}
      <ExportModalV2
        visible={exportModalVisible}
        onCancel={() => setExportModalVisible(false)}
        projectName={project.name}
        projectNameEn={project.name_en}
      />
    </Card>
  );
};

export default ProjectCard;
